<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ arr.length }}</strong></span
    >
    <ul class="filters">
      <li @click="changeBtn('all')">
        <!-- all表示全部 -->
        <a :class="{ selected: 'all' === curType }" href="javascript:;">全部</a>
      </li>
      <li @click="changeBtn('no')">
        <!-- no表示未完成 -->
        <a :class="{ selected: 'no' === curType }" href="javascript:;"
          >未完成</a
        >
      </li>
      <li @click="changeBtn('yes')">
        <!-- yes表示已完成 -->
        <a :class="{ selected: 'yes' === curType }" href="javascript:;"
          >已完成</a
        >
      </li>
    </ul>
    <button class="clear-completed" @click="clearFn">清除已完成</button>
  </footer>
</template>

<script>
/**
 * 点击底部切换--点谁谁有边框
 * 我们需要通过selected类名来控制是否显示边框
 * 其实，我们只要点谁给谁添加selected类名即可
 * 1、我们需要知道用户点击的谁，我们可以给三个按钮分别制定一个标识符(all,no,yes)
 * 当用户点击按钮的时候，我们只需要把按钮的标识符保存起来，那么我们就可以通过这个标识符判断用户点了谁
 * 2、动态设置类名，只需要根据按钮各自的标识符和保存起来的标识符进行判断，如果两个值相等，说明用户点击了该按钮,给用户selected类名
 *
 * 需求2、点击底部按钮，切换不同的数据
 * 筛选数据在父组件中就是你属性中进行、最终结果返回给计算属性，如何用户渲染
 * 1、给按钮绑定点击事件（上午需求1中已完成）
 * 2、在事件处理函数中“子传父”把用户点击的按钮标识符curtype传递给父组件
 * 3、父组件中，绑定自定义事件，然后再事件处理函数中接受并保存curType
 * 4、父组件中，生命计算属性showArr用来筛选显示的数据，根据保存的粗人Type进行筛选即可
 *
 */
export default {
  props: ["arr"],
  data() {
    return {
      curType: "all",
    };
  },
  methods: {
    changeBtn(type) {
      this.curType = type;
      this.$emit("changeEvent", this.curType);
    },
    clearFn() {
      this.$emit("clearEvent");
    },
  },
};
</script>